<template>
  <div class="ref_container">
    <div>{{ state.count }}</div>
    <div>{{ num }}</div>
    <button @click="increment">+1</button>
    <button @click="increment1">+1</button>
    <button @click="add">test</button>
    <div>{{ name }}---{{ age }}</div>
    <button @click="updateName">修改age</button>
  </div>
</template>
<script>
// import { reactive, ref, toRefs } from 'vue'
import { reactive, ref, toRef } from 'vue'
export default {
  setup (props, context) {
    const state = reactive({
      count: 100
    })
    const num = ref(200)
    const info = reactive({
      name: 'why',
      age: 20
    })
    // eslint-disable-next-line no-undef
    // 转化为ref对象
    // const { name, age } = toRefs(info)
    const { name } = info
    const age = toRef(info, 'age')
    console.warn(props, context)
    const add = () => {
      context.emit('abcsd')
    }
    const increment = () => {
      state.count++
    }
    const increment1 = () => {
      num.value++
    }
    const updateName = () => {
      // eslint-disable-next-line no-const-assign
      age.value++
      console.log('age====', age.value)
    }
    return {
      add,
      state,
      increment,
      num,
      increment1,
      name,
      age,
      updateName
    }
  }
}
</script>
<style scoped>
</style>
